<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box4{
        width: 100px;
        height: 100px;
        background-color: rgb(26, 201, 143);
    }
    .box5{
        width: 100px;
        height: 100px;
        background-color: rgb(199, 4, 173);
    }

    .root{
        width: 300px;
        height: 300px;
        background-color: rgb(66, 51, 51);
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <!-- 鼠标事件：
           click：按下鼠标时触发
           dblclick：双击时触发
           mousedown：按下鼠标键时触发
           mouseup：释放鼠标键时触发
           mousemove：移动时触发
           mouseenter：子节点不会触发
           mouseleave: 父节点不会触发
           mouseover：当进入一个节点时触发，进入子节点时再一次触发事件
           mouseout：离开时触发，离开父节点也会触发事件
           wheel：滚动鼠标的滚轮时触发
    -->

    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>
    <div id="btn5" class="box1"></div>
    <div id="btn6" class="box2"></div>
    <div id="btn7" class="box3"></div>
    <div id="btn8" class="box4"></div>
    <div id="btn9" class="box5"></div>


    <!-- mouseenter\mouseleave跟mouseover\mouseout的区别 -->
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>
    <script>
        var btn1 = document.getElementById("btn1")
        var btn2 = document.getElementById("btn2")
        var btn3 = document.getElementById("btn3")
        var btn4 = document.getElementById("btn4")
        var btn5 = document.getElementById("btn5")
        var btn6 = document.getElementById("btn6")
        var btn7 = document.getElementById("btn7")
        var btn8 = document.getElementById("btn8")
        var btn9 = document.getElementById("btn9")
        btn1.onclick = function(){
            console.log("单击事件");
        }

        btn2.ondblclick = function(){
            console.log("双击事件");
        }

        btn3.onmousedown = function(){
            console.log("鼠标按下");
        }
        btn4.onmouseup = function(){
            console.log("鼠标抬起");
        }
        btn5.onmousemove = function(){
            console.log("鼠标移动了");
        }
        btn6.onmouseenter = function(){
            console.log("鼠标进入");
        }
        btn7.onmouseleave = function(){
            console.log("鼠标离开");
        }

        btn8.onmouseover = function(){
            console.log("鼠标进入");
        }
        btn9.onmouseout = function(){
            console.log("鼠标离开");
        }

        //获取元素
        var root = document.getElementById("root");
        var box = document.getElementById("box");
        
        root.onmouseenter = function(){
            console.log("鼠标进入了");
        }

        root.onmouseover = function(){
            console.log("子夫都触发");
        }

    </script>
</body>
</html>